<script lang='ts' setup>
import Header from '@/components/Header.vue';
import Sidebar from '@/components/chat/Sidebar.vue';
import OperationBar from '@/components/chat/OperationBar.vue';
import { appRef } from '@/models/app.ref';

</script>
<template>
  <div class="root flex">
    <Sidebar v-show="appRef.isOpen" />
    <div class="container flex-c">
      <OperationBar v-if="!appRef.isOpen" />
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.root {
  width: 100vw;
  height: 100vh;
  // overflow: hidden;
  background: var(--color-bg-2);
  color: var(--color-text-2);
  position: relative;
  position: relative;

  .container {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .main {
    flex: 1;
    height: 100%;
  }

}
</style>
